{% extends 'base.html' %}
{% load static %}

{% block title %}前台看板 - 维修管理系统{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>前台工作台</h1>
        <div class="text-muted">
            <small>欢迎, {{ user.username }}</small>
        </div>
    </div>

    <!-- 统计卡片 -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card text-white bg-primary">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="card-title">待登记签收</h5>
                            <h2 class="mb-0">{{ registration_count }}</h2>
                        </div>
                        <i class="bi bi-clipboard-check display-4"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card text-white bg-success">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="card-title">待返还设备</h5>
                            <h2 class="mb-0">{{ return_count }}</h2>
                        </div>
                        <i class="bi bi-box-arrow-in-right display-4"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 待登记签收工单 -->
    <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">待登记签收工单</h5>
            <span class="badge bg-primary">{{ registration_count }}</span>
        </div>
        <div class="card-body">
            {% if pending_registration %}
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>工单号</th>
                            <th>工单标题</th>
                            <th>创建者</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for ticket in pending_registration %}
                        <tr>
                            <td>
                                {% if ticket.ticket_number %}
                                <small class="text-muted">{{ ticket.ticket_number }}</small>
                                {% else %}
                                <small class="text-muted">-</small>
                                {% endif %}
                            </td>
                            <td>{{ ticket.title }}</td>
                            <td>{{ ticket.created_by.username }}</td>
                            <td>{{ ticket.created_at|date:"Y-m-d H:i" }}</td>
                            <td>
                                <a href="{% url 'tickets:ticket_detail' ticket.pk %}" class="btn btn-sm btn-outline-primary">
                                    查看详情
                                </a>
                                <a href="{% url 'tickets:ticket_register' ticket.pk %}" class="btn btn-sm btn-primary">
                                    登记签收
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="text-center text-muted py-4">
                <i class="bi bi-check-circle display-4"></i>
                <p class="mt-3">暂无待登记签收的工单</p>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- 待返还设备工单 -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">待返还设备工单</h5>
            <span class="badge bg-success">{{ return_count }}</span>
        </div>
        <div class="card-body">
            {% if pending_return %}
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>工单号</th>
                            <th>工单标题</th>
                            <th>创建者</th>
                            <th>完成时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for ticket in pending_return %}
                        <tr>
                            <td>
                                {% if ticket.ticket_number %}
                                <small class="text-muted">{{ ticket.ticket_number }}</small>
                                {% else %}
                                <small class="text-muted">-</small>
                                {% endif %}
                            </td>
                            <td>{{ ticket.title }}</td>
                            <td>{{ ticket.created_by.username }}</td>
                            <td>{{ ticket.completed_at|date:"Y-m-d H:i" }}</td>
                            <td>
                                <a href="{% url 'tickets:ticket_detail' ticket.pk %}" class="btn btn-sm btn-outline-primary">
                                    查看详情
                                </a>
                                <a href="{% url 'tickets:ticket_return' ticket.pk %}" class="btn btn-sm btn-success">
                                    设备返还
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="text-center text-muted py-4">
                <i class="bi bi-check-circle display-4"></i>
                <p class="mt-3">暂无待返还设备的工单</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- 系统通知 -->
<div class="card mt-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">系统通知</h5>
    </div>
    <div class="card-body">
        {% if notifications %}
            {% for notification in notifications %}
            <div class="alert alert-{{ notification.get_priority_class }} mb-2">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <h6 class="alert-heading mb-1">{{ notification.title }}</h6>
                        <p class="mb-0 small">{{ notification.content|truncatewords:15 }}</p>
                    </div>
                    <small class="text-muted">{{ notification.created_at|date:"m-d H:i" }}</small>
                </div>
            </div>
            {% endfor %}
        {% else %}
            <div class="text-center text-muted py-3">
                <i class="bi bi-bell" style="font-size: 2rem;"></i>
                <p class="mt-2 mb-0">暂无通知</p>
            </div>
        {% endif %}
    </div>
</div>

<!-- 已处理工单 -->
<div class="card mt-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">最近已处理工单</h5>
        <span class="badge bg-info">{{ processed_count }}</span>
    </div>
    <div class="card-body">
        {% if processed_tickets %}
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>工单号</th>
                        <th>工单标题</th>
                        <th>创建者</th>
                        <th>当前状态</th>
                        <th>处理时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for ticket in processed_tickets %}
                    <tr>
                        <td>
                            {% if ticket.ticket_number %}
                            <small class="text-muted">{{ ticket.ticket_number }}</small>
                            {% else %}
                            <small class="text-muted">-</small>
                            {% endif %}
                        </td>
                        <td>{{ ticket.title }}</td>
                        <td>{{ ticket.created_by.username }}</td>
                        <td>
                            <span class="badge 
                                {% if ticket.status == 'registered' %}bg-primary
                                {% elif ticket.status == 'returned' %}bg-success
                                {% else %}bg-secondary{% endif %}">
                                {{ ticket.get_status_display }}
                            </span>
                        </td>
                        <td>
                            {% if ticket.status == 'registered' %}
                                {{ ticket.registered_at|date:"Y-m-d H:i" }}
                            {% elif ticket.status == 'returned' %}
                                {{ ticket.returned_at|date:"Y-m-d H:i" }}
                            {% else %}
                                {{ ticket.updated_at|date:"Y-m-d H:i" }}
                            {% endif %}
                        </td>
                        <td>
                            <a href="{% url 'tickets:ticket_detail' ticket.pk %}" class="btn btn-sm btn-outline-primary">
                                查看详情
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="text-center text-muted py-4">
            <i class="bi bi-list-check display-4"></i>
            <p class="mt-3">暂无已处理工单</p>
        </div>
        {% endif %}
    </div>
</div>

<style>
.card {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: none;
    border-radius: 8px;
}
.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}
.table th {
    border-top: none;
    font-weight: 600;
    color: #6c757d;
}
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}
</style>
{% endblock %}
